import React, { useState, useEffect } from 'react';
import User from '../User';
import { useMatch } from 'react-router-dom';
import { getFollwers } from '../../api/userApi';

const MyFollowing = () => {
  const [followings, setFollowings] = useState([]);  // 初始化为空数组
  const [loading, setLoading] = useState(true);      // 加载状态
  const [error, setError] = useState(null);          // 错误状态

  // 修正 useMatch 的路径匹配
  const match = useMatch("/mypage/following/:userId");  // 确保路径是 /mypage/followers/:userId
  const userId = match ? match.params.userId : null;   // 从 match 中获取 userId

  useEffect(() => {
    if (userId) {
      setLoading(true);  // 请求开始时设置加载状态
      getFollwers(userId)
        .then((data) => {
          setFollowings(data);  
          setLoading(false);  // 请求完成时设置加载状态为 false
        })
        .catch((error) => {
          setError('Error fetching followers: ' + error.message);  // 设置错误信息
          setLoading(false);
        });
    }
  }, [userId]);  // 当 userId 改变时重新执行 useEffect

  // 加载中的状态
  if (loading) {
    return <div>Loading...</div>;
  }

  // 错误处理
  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div>
      <ul>
        {followings.map((following) => (
          <div key={following.userId}>
            <User user={following} /> {/* 渲染每个关注者 */}
          </div>
        ))}
      </ul>
    </div>
  );
};

export default MyFollowing;
